<template>
    <div class="login-page">
        <!-- 背景装饰 -->
        <div class="bg-decoration">
            <div class="bg-circle bg-circle-1"></div>
            <div class="bg-circle bg-circle-2"></div>
            <div class="bg-circle bg-circle-3"></div>
        </div>

        <div class="login-container">
            <!-- 左侧欢迎区域 -->
            <div class="welcome-section">
                <div class="welcome-content">
                    <div class="medical-icon">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C13.1 2 14 2.9 14 4V6H16C17.1 6 18 6.9 18 8V10C19.1 10 20 10.9 20 12S19.1 14 18 14V16C18 17.1 17.1 18 16 18H14V20C14 21.1 13.1 22 12 22S10 21.1 10 20V18H8C6.9 18 6 17.1 6 16V14C4.9 14 4 13.1 4 12S4.9 10 6 10V8C6 6.9 6.9 6 8 6H10V4C10 2.9 10.9 2 12 2Z"/>
                        </svg>
                    </div>
                    <h1 class="welcome-title">
                        <span class="gradient-text">京东医疗</span>
                    </h1>
                    <p class="welcome-subtitle">
                        专业医疗服务平台，守护您的健康
                    </p>
                    <div class="feature-list">
                        <div class="feature-item">
                            <div class="feature-icon">🏥</div>
                            <span>专业医疗</span>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">👨‍⚕️</div>
                            <span>权威专家</span>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">🔐</div>
                            <span>隐私保护</span>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">💊</div>
                            <span>便民服务</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧登录表单 -->
            <div class="login-card">
                <div class="brand">
                    <div class="login-type-tabs">
                        <div
                            class="tab-item"
                            :class="{ active: loginType === 'password' }"
                            @click="loginType = 'password'"
                        >
                            <div class="tab-icon">🔐</div>
                            <span>账密登录</span>
                        </div>
                        <div
                            class="tab-item"
                            :class="{ active: loginType === 'sms' }"
                            @click="loginType = 'sms'"
                        >
                            <div class="tab-icon">📱</div>
                            <span>短信登录</span>
                        </div>
                    </div>
                    <h2>{{ loginType === 'password' ? '医护登录' : '短信登录' }}</h2>
                    <p class="subtitle">{{ loginType === 'password' ? '欢迎使用京东医疗管理系统' : '验证手机号快速登录' }}</p>
            </div>

            <el-form
                ref="formRef"
                :model="form"
                :rules="rules"
                label-position="top"
                class="login-form"
                @keyup.enter.native="onSubmit"
            >
                    <!-- 账密登录表单 -->
                    <template v-if="loginType === 'password'">
                        <el-form-item label="用户名" prop="username" class="form-item">
                    <el-input
                        v-model.trim="form.username"
                        placeholder="请输入用户名"
                        clearable
                        :prefix-icon="User"
                        autofocus
                                size="large"
                    />
                </el-form-item>

                        <el-form-item label="密码" prop="password" class="form-item">
                    <el-input
                        v-model="form.password"
                        placeholder="请输入密码"
                        show-password
                        type="password"
                        :prefix-icon="Lock"
                                size="large"
                            />
                        </el-form-item>
                    </template>

                    <!-- 短信登录表单 -->
                    <template v-else>
                        <el-form-item label="手机号" prop="phone" class="form-item">
                            <el-input
                                v-model.trim="form.phone"
                                placeholder="请输入手机号"
                                clearable
                                :prefix-icon="Phone"
                                autofocus
                                size="large"
                                maxlength="11"
                    />
                </el-form-item>

                        <el-form-item label="验证码" prop="smsCode" class="form-item">
                            <div class="sms-input-group">
                                <el-input
                                    v-model.trim="form.smsCode"
                                    placeholder="请输入验证码"
                                    clearable
                                    size="large"
                                    maxlength="6"
                                    style="flex: 1"
                                />
                                <el-button
                                    type="primary"
                                    size="large"
                                    :disabled="!isPhoneValid || smsCountdown > 0"
                                    @click="sendSmsCode"
                                    class="sms-btn"
                                >
                                    {{ smsCountdown > 0 ? `${smsCountdown}s后重发` : '获取验证码' }}
                                </el-button>
                            </div>
                        </el-form-item>
                    </template>

                    <div class="form-row" v-if="loginType === 'password'">
                        <el-checkbox v-model="form.remember" class="remember-checkbox">
                            记住我
                        </el-checkbox>
                        <el-link type="primary" :underline="false" @click="onForgot" class="forgot-link">
                            忘记密码？
                        </el-link>
                    </div>

                    <!-- 短信登录提示 -->
                    <div v-if="loginType === 'sms'" class="sms-notice">
                        <div class="notice-icon">💡</div>
                        <div class="notice-text">
                            <p><strong>短信登录提示：</strong></p>
                            <p>• 验证码将发送到您的手机</p>
                            <p>• 验证码有效期5分钟</p>
                            <p>• 首次登录将自动创建账户</p>
                        </div>
                </div>

                <el-button
                    type="primary"
                    size="large"
                    class="submit-btn"
                    :loading="submitting"
                    @click="onSubmit"
                    block
                >
                        <span v-if="!submitting">
                            {{ loginType === 'password' ? '立即登录' : '短信登录' }}
                        </span>
                        <span v-else>
                            {{ loginType === 'password' ? '登录中...' : '验证中...' }}
                        </span>
                                </el-button>

                    <div class="divider">
                        <span>第三方登录</span>
                    </div>

                <div class="social-row">
                    <el-tooltip content="钉钉登录" placement="top">
                        <div class="social-btn dingtalk-btn" :class="{ disabled: dingTalkLoading }" @click="onDingTalkLogin">
                            <div class="social-icon" v-if="!dingTalkLoading">钉</div>
                            <div class="social-loading" v-else>⏳</div>
                        </div>
                    </el-tooltip>
                    <el-tooltip content="Gitee 登录" placement="top">
                            <div class="social-btn gitee-btn" @click="onGiteeLogin">
                                <div class="social-icon">G</div>
                            </div>
                        </el-tooltip>
                        <el-tooltip content="飞书登录" placement="top">
                            <div class="social-btn feishu-btn" @click="onFeishuLogin">
                                <div class="social-icon">飞</div>
                            </div>
                        </el-tooltip>
                </div>

                <div class="helper-row">
                        <span class="helper-text">还没有账号？</span>
                        <el-link type="primary" :underline="false" @click="onRegister" class="register-link">
                            立即注册
                        </el-link>
                </div>
            </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock, Phone } from '@element-plus/icons-vue'
import request from '@/utils/request'

const router = useRouter()
const route = useRoute()

const formRef = ref(null)
const submitting = ref(false)
const loginType = ref('password') // 'password' 或 'sms'
const smsCountdown = ref(0) // 短信验证码倒计时
const dingTalkLoading = ref(false)  // 钉钉登录loading状态

const form = reactive({
    username: '',
    password: '',
    remember: true,
    // 短信登录专用字段
    phone: '',
    smsCode: '',
})

// 手机号验证计算属性
const isPhoneValid = computed(() => {
    const phoneRegex = /^1[3-9]\d{9}$/
    return phoneRegex.test(form.phone)
})

const rules = computed(() => {
    if (loginType.value === 'password') {
        return {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 32, message: '长度应为 2-32 个字符', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 1, max: 64, message: '长度应为 1-64 个字符', trigger: 'blur' },
            ],
        }
    } else {
        return {
            phone: [
                { required: true, message: '请输入手机号', trigger: 'blur' },
                { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' },
            ],
            smsCode: [
                { required: true, message: '请输入验证码', trigger: 'blur' },
                { len: 6, message: '验证码应为6位数字', trigger: 'blur' },
            ],
        }
    }
})

function persistToken(token) {
    if (form.remember) {
        localStorage.setItem('token', token)
    } else {
        sessionStorage.setItem('token', token)
    }
}

// 发送短信验证码
async function sendSmsCode() {
    if (!isPhoneValid.value) {
        ElMessage.error('请输入正确的手机号')
        return
    }

    try {
        console.log('发送短信验证码到:', form.phone)

        const response = await request.post('/sms/send', {
            phone: form.phone
        })

        console.log('短信发送响应:', response.data)

        const data = response.data
        if (data && data.code === 0) {
            // 统一显示发送成功消息，不包含验证码
            ElMessage({
                message: data.msg + '，验证码有效期5分钟',
                type: 'success',
                duration: 4000,
                showClose: true
            })

            // 显示额外的数据信息（如果有）
            if (data.data && data.data.expire_time) {
                console.log(`验证码将在 ${data.data.expire_time} 秒后过期`)
            }

            // 开始倒计时
            smsCountdown.value = 60
            const timer = setInterval(() => {
                smsCountdown.value--
                if (smsCountdown.value <= 0) {
                    clearInterval(timer)
                }
            }, 1000)
        } else {
            throw new Error(data?.msg || '验证码发送失败')
        }

    } catch (error) {
        console.error('短信发送错误:', error)

        // 更详细的错误处理和显示
        let errorMessage = '验证码发送失败，请稍后重试'

        if (error.response && error.response.data) {
            const errorData = error.response.data
            console.log('错误响应数据:', errorData)

            if (errorData.msg) {
                errorMessage = errorData.msg

                // 对特定错误进行友好提示
                if (errorData.msg.includes('等待') && errorData.msg.includes('秒')) {
                    // 频率限制错误
                    ElMessage({
                        message: errorData.msg,
                        type: 'warning',
                        duration: 5000,
                        showClose: true
                    })
                    return
                } else if (errorData.msg.includes('手机号格式')) {
                    ElMessage.error('手机号格式不正确，请检查后重试')
                    return
                }
            }
        } else if (error.message) {
            errorMessage = error.message
        }

        ElMessage({
            message: errorMessage,
            type: 'error',
            duration: 5000,
            showClose: true
        })
    }
}

async function onSubmit() {
    if (!formRef.value) return
    try {
        await formRef.value.validate()
        submitting.value = true

        if (loginType.value === 'password') {
            // 账密登录
            console.log('发送账密登录请求:', { username: form.username, password: '***' })

            const response = await request.post('/user/login', {
            username: form.username,
            password: form.password,
        })

            console.log('收到响应:', response)
            const data = response.data
            console.log('响应数据:', data)

            if (data && data.code === 0) {
                const token = data.data?.token
            if (!token) throw new Error('登录成功但未返回 token')
            persistToken(token)
                ElMessage.success(data.msg || '登录成功')
            router.replace({ path: '/home' }) // 使用replace避免返回到登录页
        } else {
            throw new Error(data?.msg || '登录失败')
            }
        } else {
            // 短信登录
            console.log('发送短信登录请求:', { phone: form.phone, smsCode: form.smsCode })

            const response = await request.post('/sms/login', {
                phone: form.phone,
                smsCode: form.smsCode
            })

            console.log('收到响应:', response)
            const data = response.data
            console.log('响应数据:', data)

            if (data && data.code === 0) {
                const token = data.data?.token
                const user = data.data?.user

                if (!token) throw new Error('登录成功但未返回 token')

                persistToken(token)

                // 显示详细的登录成功信息
                const welcomeMsg = user ?
                    `${data.msg || '短信登录成功'}！欢迎您，${user.nickname || user.username}` :
                    (data.msg || '短信登录成功！')

                ElMessage({
                    message: welcomeMsg,
                    type: 'success',
                    duration: 3000,
                    showClose: true
                })

                console.log('登录成功，用户信息:', user)
                router.replace({ path: '/home' }) // 使用replace避免返回到登录页
            } else {
                throw new Error(data?.msg || '短信登录失败')
            }
        }
    } catch (err) {
        console.error('登录错误详情:', err)
        console.error('错误响应:', err.response)

        let errorMessage = loginType.value === 'password' ? '登录失败，请稍后重试' : '短信登录失败，请稍后重试'
        let messageType = 'error'

        if (err.response && err.response.data) {
            const errorData = err.response.data
            console.log('错误响应数据:', errorData)

            if (errorData.msg) {
                errorMessage = errorData.msg

                // 针对短信登录的特殊错误处理
                if (loginType.value === 'sms') {
                    if (errorData.msg.includes('验证码错误')) {
                        errorMessage = '验证码输入错误，请重新输入'
                        messageType = 'warning'
                    } else if (errorData.msg.includes('已过期')) {
                        errorMessage = '验证码已过期，请重新获取验证码'
                        messageType = 'warning'
                    } else if (errorData.msg.includes('手机号')) {
                        errorMessage = '手机号格式不正确，请检查后重试'
                    }
                }
                // 针对账密登录的特殊错误处理
                else if (loginType.value === 'password') {
                    if (errorData.msg.includes('用户名') || errorData.msg.includes('密码')) {
                        errorMessage = '用户名或密码错误，请重新输入'
                        messageType = 'warning'
                    }
                }
            }
        } else if (err.message) {
            errorMessage = err.message
        }

        ElMessage({
            message: errorMessage,
            type: messageType,
            duration: 5000,
            showClose: true
        })
    } finally {
        submitting.value = false
    }
}

function onForgot() {
    ElMessage.info('找回密码功能即将上线')
}

function onRegister() {
    router.push('/register')
}

function onGiteeLogin() {
    // 跳转到Django的Gitee登录接口
    window.location.href = 'http://localhost:8000/oauth/gitee/login'
}

async function onDingTalkLogin() {
    if (dingTalkLoading.value) return // 防止重复点击
    
    try {
        dingTalkLoading.value = true

        // 1. 调用后端获取钉钉授权URL
        const { data } = await request.get('/Login/ding')

        if (data && data.url) {
            ElMessage.success('正在跳转到钉钉授权页面...')
            // 2. 跳转到钉钉授权页面
            window.location.href = data.url
        } else {
            throw new Error('获取钉钉授权URL失败')
        }
    } catch (err) {
        console.error('钉钉登录错误:', err)
        ElMessage.error(err.message || '钉钉登录失败，请稍后重试')
    } finally {
        dingTalkLoading.value = false
    }
}

function onFeishuLogin() {
    try {
        ElMessage.success('正在跳转到飞书授权页面...')
        // 跳转到Django的飞书登录接口
        window.location.href = 'http://localhost:8000/oauth/feishu/login'
    } catch (err) {
        console.error('飞书登录错误:', err)
        ElMessage.error(err.message || '飞书登录失败，请稍后重试')
    }
}

// 检查URL中的错误信息（第三方登录失败回调）
onMounted(() => {
    const error = route.query.error
    const msg = route.query.msg
    
    if (error) {
        console.log('检测到登录错误:', error, msg)
        
        // 根据不同的错误类型显示不同的提示
        let errorMessage = '登录失败，请稍后重试'
        
        if (error === 'gitee_login_failed') {
            errorMessage = msg ? `Gitee登录失败: ${msg}` : 'Gitee登录失败，请稍后重试'
        } else if (error === 'feishu_login_failed') {
            errorMessage = msg ? `飞书登录失败: ${msg}` : '飞书登录失败，请稍后重试'
        }
        
        ElMessage({
            message: errorMessage,
            type: 'error',
            duration: 8000,
            showClose: true
        })
        
        // 清理URL中的错误参数
        if (window.history.replaceState) {
            window.history.replaceState({}, document.title, window.location.pathname)
        }
    }
})
</script>

<style scoped>
/* 页面主体 */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    position: relative;
    overflow: hidden;
}

/* 背景装饰 */
.bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.bg-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    animation: float 6s ease-in-out infinite;
}

.bg-circle-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.bg-circle-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.bg-circle-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 60%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* 主容器 */
.login-container {
    display: flex;
    width: 1000px;
    max-width: 90vw;
    min-height: 600px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* 欢迎区域 */
.welcome-section {
    flex: 1;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    position: relative;
}

.welcome-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="medical" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M25 15 L25 20 L20 20 L20 30 L25 30 L25 35 L30 35 L30 30 L35 30 L35 20 L30 20 L30 15 Z" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23medical)"/></svg>');
    opacity: 0.3;
}

.welcome-content {
    text-align: center;
    color: white;
    z-index: 1;
    position: relative;
}

.medical-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    animation: pulse 2s ease-in-out infinite;
}

.medical-icon svg {
    width: 40px;
    height: 40px;
    color: white;
}

.welcome-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.gradient-text {
    background: linear-gradient(45deg, #fff, #e6f7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-subtitle {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.6;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    opacity: 0.9;
}

.feature-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(10px);
}

/* 登录卡片 */
.login-card {
    flex: 1;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 品牌区域 */
.brand {
    text-align: center;
    margin-bottom: 40px;
}

/* 登录类型切换标签 */
.login-type-tabs {
    display: flex;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    gap: 4px;
}

.tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #6c757d;
    font-weight: 500;
    font-size: 0.9rem;
}

.tab-item:hover {
    background: rgba(79, 172, 254, 0.1);
    color: #4facfe;
}

.tab-item.active {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
}

.tab-icon {
    font-size: 1.2rem;
}



.brand h2 {
    margin: 0 0 8px 0;
    font-weight: 700;
    font-size: 1.8rem;
    color: #1890ff;
}

.brand .subtitle {
    margin: 0;
    color: #6c757d;
    font-size: 0.95rem;
}

/* 表单样式 */
.login-form {
    margin-top: 0;
}

.form-item {
    margin-bottom: 24px;
}

.form-item :deep(.el-form-item__label) {
    color: #4a5568;
    font-weight: 600;
    margin-bottom: 8px;
}

.form-item :deep(.el-input__wrapper) {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.form-item :deep(.el-input__wrapper:hover) {
    border-color: #4facfe;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.15);
}

.form-item :deep(.el-input__wrapper.is-focus) {
    border-color: #4facfe;
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 30px;
}

.remember-checkbox :deep(.el-checkbox__label) {
    color: #4a5568;
    font-weight: 500;
}

.forgot-link {
    font-weight: 500;
}

/* 短信输入组 */
.sms-input-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.sms-btn {
    height: 40px;
    white-space: nowrap;
    min-width: 120px;
    font-size: 0.9rem;
    border-radius: 8px;
}

.sms-btn:disabled {
    background: #e9ecef;
    border-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

/* 短信登录提示 */
.sms-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, #fff7e6 0%, #fef9f0 100%);
    border: 1px solid #ffd591;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

.notice-icon {
    font-size: 1.2rem;
    margin-top: 2px;
}

.notice-text {
    flex: 1;
    font-size: 0.85rem;
    color: #d48806;
    line-height: 1.5;
}

.notice-text p {
    margin: 0 0 4px 0;
}

.notice-text p:last-child {
    margin-bottom: 0;
}

.notice-text code {
    background: #fff1b8;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    color: #d48806;
    font-weight: bold;
}

/* 提交按钮 */
.submit-btn {
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
}

.submit-btn:active {
    transform: translateY(0);
}

/* 分割线 */
.divider {
    position: relative;
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 30px 0 25px;
}

.divider::before,
.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: linear-gradient(to right, transparent, #e2e8f0, transparent);
}

.divider::before {
    left: 0;
}

.divider::after {
    right: 0;
}

.divider span {
    background: white;
    padding: 0 20px;
}

/* 社交登录按钮 */
.social-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 30px;
}

.social-btn {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.social-btn:hover:not(.disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.social-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.social-icon {
  font-weight: 700;
  font-size: 1.2rem;
  color: white;
}

.dingtalk-btn {
  background: linear-gradient(135deg, #1890ff, #096dd9);
}

.gitee-btn {
  background: linear-gradient(135deg, #52c41a, #389e0d);
}

.feishu-btn {
  background: linear-gradient(135deg, #00d4aa, #00b894);

  .wechat-btn {
    background: linear-gradient(135deg, #52c41a, #389e0d);
  }

  .social-loading {
    font-size: 20px;
  }

  /* 帮助行 */

  .helper-row {
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
  }

  .helper-text {
    margin-right: 8px;
  }

  .register-link {
    font-weight: 600;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .login-container {
      flex-direction: column;
      width: 95vw;
      min-height: auto;
    }

    .welcome-section {
      padding: 40px 20px;
      min-height: 200px;
    }

    .welcome-title {
      font-size: 2rem;
    }

    .feature-list {
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
    }

    .login-card {
        padding: 40px 30px;
    }

    .brand h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 30px 20px;
    }

    .social-row {
        gap: 10px;
    }

    .social-btn {
        width: 45px;
        height: 45px;
    }
}
}
</style>
